<template>
  <div class="my wrap">
    <div class="set_top">
      <van-uploader :after-read="afterRead">
        <img
          :src="userImg"
          alt=""
        />
      </van-uploader>
      <div
        class="set_tright"
        @click="toSet"
      >
        <!-- <b>{{username}}</b> -->
        <p>15635807896</p>
    </div>
    <router-link to="login">
      <van-icon
        name="arrow"
        color="#666"
      />
    </router-link>
  </div>

  <div class="set_center">
    <div class="center_center" @click="toeachenter">
      <div class="center_left">
        <van-icon
          name="setting-o"
          size="24"
          color="#51D3FC"
        />
        <span>设置</span>
      </div>
      <van-icon name="arrow" />
    </div>
    <div class="center_center" @click="tonews">
      <div class="center_left">
        <van-icon
          name="chat-o"
          size="26"
          color="#FFCC00"
        />
        <span>我的消息</span>
      </div>
      <van-icon name="arrow" />
    </div>

    <div class="center_center">
      <div class="center_left">
        <van-icon
          name="star-o"
          size="26"
          color="#1A814F"
        />
        <span>我的收藏</span>
      </div>
      <van-icon name="arrow" />
    </div>

    <div class="center_center">
      <div class="center_left">
        <van-icon name="description" size="26" color="#F57B49"/>
        <span>我的订单</span>
      </div>
      <van-icon name="arrow" />
    </div>
    <div
      class="center_center"
      @click="showShare = true"
    >
      <div class="center_left">
        <van-icon
          name="share-o"
          size="26"
        />
        <span>应用分享</span>
      </div>
      <van-icon name="arrow" />
  </div>
  <van-share-sheet
    v-model="showShare"
    title="立即分享给好友"
    :options="options"
    @select="onSelect"
  />
  </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  // 定义属性
  name: "My",
  data() {
    return {
      activeNames: ["1"],
      userImg: require("../assets/img/touxiang.png"),
      username: "",
      loginBoolean: false,
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  methods: {
    toSet() {},
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.userImg = file.content;
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    tonews(){
      this.$router.push({path:"/my_news"});
    },
    toeachenter(){
      this.$router.push({path:"/Eachcenter"});
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.my {
  .set_top {
    height: 140px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // background-color: rgb(102, 193, 253);
    background: url("../assets/img/bg5.jpg") no-repeat;
    background-size: cover;
    padding: 20px;
    a {
      font-size: 20px;
      color: #f8f8f8;
    }
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .set_tright {
      margin-left: 20px;
      b,
      p {
        font-size: 18px;
      }
    }
  }
  .set_center {
    margin-top: 20px;
    width: 100%;
    padding: 20px 10px 20px 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 5px #fff;
    .center_center {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      line-height: 50px;
      .center_left {
        span {
          font-size: 18px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>